<template>
  <PageLayout :page-style="pageStyle">
    <template #header>
      <HeaderLayout show-back>
        <view>{{ $t('Pairing.Help.Navigator.Title') }}</view>
      </HeaderLayout>
    </template>
    <view class="helpContainer">
      <view class="topfixed">
        <view class="helpTitle">{{ $t('Pairing.Help.Content.Title') }}</view>
      </view>
      <view class="content">
        <wux-accordion-group :auto="false" :default-current="showIndexList" :current="showIndexList">
          <wux-accordion :key="index" :title="item.question" v-for="(item, index) in errorItemList" :help="true">
            <view class="helpcontent">
              <view v-for="answerItem in item.answer">
                <rich-text :nodes="(answerItem as AnswerItem).text"></rich-text>
                <image
                  :src="matchUrl((answerItem as AnswerItem).pictureUrl)"
                  class="helpImg"
                  :hidden="!(answerItem as AnswerItem).pictureUrl"
                  mode="widthFix"
                />
              </view>
              <view
                v-if="item.question == $t('Pairing.Help.ResetAppliance.Button.Text')"
                class="btnStyle"
                @click="retryPairing"
                >{{ $t('Pairing.Help.Reset.Button.Text') }}</view
              >
            </view>
          </wux-accordion>
        </wux-accordion-group>
      </view>
    </view>

    <template #footer>
      <FooterLayout fixed :size="footerSize" :footer-style="footerStyle">
        <TextButton size="large" :text="$t('Pairing.Help.Customer.Service.Text')" @click="getHelp" />
      </FooterLayout>
    </template>
  </PageLayout>
</template>

<script setup lang="ts">
import PageLayout from '@/layout/page/page.vue'
import HeaderLayout from '@/layout/page/header.vue'
import FooterLayout from '@/layout/page/footer.vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import netconfig from '@/config/netconfig'
import { toPage } from '@/utils/mpHelper'
import { footerSize } from '@/layout/appliance/style'
import { getPairingInfo, type ErrorContentItem, type AnswerItem } from '@/api/content'
import type { CSSProperties } from 'vue'
import TextButton from '@/common/textButton.vue'

let errorItemList = ref<Array<ErrorContentItem>>([])
let showIndexList = ref<Array<string>>([])
const rootUrl = ref(netconfig.ASSETSPRE)
const pageStyle = {
  backgroundColor: '#f4f4f4',
}
const footerStyle: CSSProperties = {
  padding: '32rpx 32rpx 48rpx',
  backgroundColor: '#f4f4f4',
  boxSizing: 'border-box',
}
onLoad((options: any) => {
  console.log('onload', options)
  initData(options.vib)
})
onShow(() => {})
async function initData(vib: string) {
  const res = await getPairingInfo(vib) //vib:TI909801CN
  errorItemList.value = res.data.step_list?.[0]?.errors
  console.error('initData', errorItemList)
  errorItemList.value.find((item, index) => {
    if (typeof item.answer === 'string') {
      item.answer = JSON.parse(item.answer)
    }
    showIndexList.value.push(index + '')
    return item
  })
}
function getHelp() {
  uni.makePhoneCall({
    phoneNumber: '4008289898',
    success: function () {
      console.log('help.js', 'getHelp', '拨打电话成功！')
    },
    fail: function () {
      console.log('help.js', 'getHelp', '拨打电话失败！')
    },
  })
}
function retryPairing() {
  let path = '/pages/pairing/chooseMode/chooseMode'
  toPage(path)
}
function matchUrl(url: string): string {
  return rootUrl.value + url
}
</script>

<style scoped lang="less">
.helpTitle {
  font-size: 32rpx;
  font-weight: bold;
  color: #030303;
  padding: 20rpx 30rpx;
  line-height: 60rpx;
}
.topFixed {
  float: left;
  position: relative;
  /* margin-top: 156rpx; */
  left: 0;
  text-align: left;
  z-index: 9;
}
.helpcontent {
  font-size: 28rpx;
  color: #303133;
}
.helpImg {
  width: 100%;
  margin: 60rpx auto;
}
.helpImg.imgLast {
  margin-bottom: 90rpx;
}
.content {
  margin-top: -1rpx;
  padding-bottom: 90rpx;
}

.icon {
  display: inline-block;
  margin: 0 10rpx;
  vertical-align: middle;
  width: 52rpx !important;
  height: 40rpx !important;
}
.bold {
  font-weight: bold;
}
.btnStyle {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background-color: #2d3746;
  color: #ffffff;
  font-size: 32rpx;
}
.helpContainer {
  :deep(.iconHeight) {
    display: inline-block;
    margin: -10rpx 10rpx 0;
    vertical-align: middle;
    width: auto;
    height: 56rpx !important;
  }
}
</style>
